<template>
    <!--
    说明:
        1. 所有元素必须包含在当前div中, 否则会报错.
    -->
    <div class="home">
        home
        <p>{{ msg }}</p>
        <!--
        功能:
            通过v-bind指令来操作属性节点.
        -->
        <div v-bind:title="title">这是一个div</div>

        <div class="test"></div>

    </div>
</template>

<script>
    export default {
        name: "Home",
        //data就像是vue对象中的data属性一样, 其中的值可以在当前子组件中使用
        data() {
            return {
                msg: 'hello world',
                title: 'news'
            }
        },
        /**
         * 功能:
         *      钩子函数, 在页面加载完成之后调用
         * 说明:
         *      1. 注意的是, 初始并不会执行而是在页面加载完成之后执行.
         */
        mounted() {
            setTimeout(() => {
                this.msg = 'sssssss';
                // eslint-disable-next-line no-console
                console.log("钩子函数执行了");
            }, 3000);
        }
    }
</script>

<style scoped>
    .test {
        height: 60px;
        width: 50px;
        background-color: red;
    }
</style>